<template>
  <div class="tool-div">
    <el-form :model="search" :inline="true">
      <el-form-item label="用户ID" prop="userId">
        <el-input v-model="search.userId" clearable/>
      </el-form-item>
      <el-form-item label="日期" prop="startTime">
        <el-col :span="11">
          <el-date-picker
              v-model="search.startTime"
              type="date"
              placeholder="起始时间"
              style="width: 100%"
          />
        </el-col>
        <el-col :span="2" class="text-center">
          <span style="padding-left: 50%">-</span>
        </el-col>
        <el-col :span="11">
          <el-date-picker
              type="date"
              v-model="search.endTime"
              placeholder="结束时间"
              style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchLoginLogList">搜索</el-button>
        <el-button type="danger" @click="delLoginLog">删除</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table ref="table" :data="loginLogList" style="width: 100%">
      <el-table-column type="selection"/>
      <el-table-column prop="loginId" label="ID"/>
      <el-table-column prop="userId" label="用户ID"/>
      <el-table-column prop="loginTime" label="登录时间"/>
      <el-table-column label="是否成功">
        <template #default="scope">
          {{ scope.row.ifSuccess == 1 ? '成功' : '失败' }}
        </template>
      </el-table-column>
      <el-table-column prop="loginUserIp" label="用户IP"/>
    </el-table>
    <el-pagination background layout="prev, pager, next"
                   v-model:page-size="pageSize"
                   v-model:current-page="currentPage"
                   v-model:page-count="pageCount"
                   @current-change="handleCurrentChange"/>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted} from "vue";
import api from "@/axios.js";
import {ElMessage, type ElTable} from "element-plus";

// 定义类型
interface search {
  userId?: String,
  startTime?: String,
  endTime?: String,
}

interface loginLog {
  loginId: Number,
  userId: String,
  loginTime: String,
  ifSuccess: Number,
  loginUserIp: String
}

const table = ref<InstanceType<typeof ElTable>>();

// 每页显示条数
const pageSize = ref<Number>(15);
// 当前页数
const currentPage = ref<Number>(1);
// 总页数
const pageCount = ref<Number>(0);
// 登录日志列表
const loginLogList = ref<loginLog[]>();
// 查询条件
let search = ref<search>({});

onMounted(() => {
  selLoginLogList();
})

function selLoginLogList() {
  loginLogList.value = undefined; // 重置列表

  let param = { // 将分页和查询条件合并到一个对象
    limit: pageSize.value, pageNow: currentPage.value, ...search.value
  };
  api({
    url: "/selLoginLogList",
    params: param
  }).then(resp => {
    currentPage.value = resp.data.page;
    pageSize.value = resp.data.limit;
    pageCount.value = resp.data.pageTotal;
    loginLogList.value = resp.data.list;
  });
}

function searchLoginLogList() {
  pageSize.value = 15;
  currentPage.value = 1;
  selLoginLogList();
}

// 处理当前页更改
const handleCurrentChange = (val: Number) => {
  currentPage.value = val;
  selLoginLogList();
}

// 删除
function delLoginLog() {
  const checkLoginArray = table.value?.getSelectionRows();
  if (checkLoginArray.length < 1) return;
  let ids = "";
  for (let i = 0; i < checkLoginArray.length; i++) {
    ids += ',' + checkLoginArray[i].loginId;
  }

  api({
    url: "/delLoginLog",
    params: {ids: ids.substring(1)}
  }).then(resp => {
    ElMessage(resp.data.message);
    currentPage.value = 1;
    selLoginLogList();
  })
}

</script>

<style scoped>
.tool-div {
  padding-bottom: 10px;
}

.search-btn {
  margin-left: 5px;
}

.del-btn {
  margin-left: 20px;
}
</style>